<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>出差申请</title>
    <script src="../../../../../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../../../../res/js/login_common.js" charset="utf-8"></script>
    <script src="../../../../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../../../../res/js/Tools.js" charset="utf-8"></script>
    <link rel="shortcut icon" type="image/x-icon" href="../../../../../res/images/favicon.ico">
    <link rel="stylesheet" href="../../../../../res/layui/css/layui.css" media="all">
</head>
<body style="padding: 10px">
<div style="display: none" id="bodys">
    <form class="layui-form layui-form-pane" id="formDId" action="" method="post" enctype="multipart/form-data">
        <h1 align="center" style="margin-bottom: 20px">出差申请表</h1>
        <input class="layui-hide" lay-verify="required" type="text" id="applyPersonnelId"
               name="applyPersonnelId"/>
        <input class="layui-hide" type="text" id="pkTravelBusinessId" name="pkTravelBusinessId"/>
        <input type="hidden" name="nSmallfileone" id="nSmallfileone">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">申请人</label>
                <div class="layui-input-inline">
                    <input class="layui-input" lay-verify="required" type="text" id="applyPersonnelName"
                    />
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">出差人</label>
                <div class="layui-input-inline">
                    <select id="personnelId" name="personnelId" lay-search></select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">申请时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="travelBusinessTime" name="travelBusinessTime">
                </div>
            </div>


            <div class="layui-inline">
                <label class="layui-form-label">差旅类型</label>
                <div class="layui-input-inline">
                    <select id="travelBusinessType" name="travelBusinessType"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">交通工具</label>
                <div class="layui-input-inline">
                    <input class="layui-input" lay-verify="required" type="text" id="travelBusinessVehicles"
                           name="travelBusinessVehicles"/>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">差旅出发地</label>
                <div class="layui-input-inline">
                    <input class="layui-input" lay-verify="required" type="text" id="travelBusinessDepart"
                           name="travelBusinessDepart"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">差旅目的地</label>
                <div class="layui-input-inline">
                    <input class="layui-input" lay-verify="required" type="text" name="travelBusinessPurpose"
                           id="travelBusinessPurpose"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="travelBusinessStartTime" name="travelBusinessStartTime">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="travelBusinessEndTime" name="travelBusinessEndTime">
                </div>
            </div>


        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">出差原因</label>
            <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id="travelBusinessReason"
                      name="travelBusinessReason" lay-verify="required">       </textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">

                <textarea placeholder="请输入内容" class="layui-textarea" id="remark"
                          name="remark" lay-verify="required">       </textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">添加附件</label>
            <div style="width: 100%;height: 50px;border:#ddd 1px solid;border-top:none;padding-top: 5px;padding-left: 20px;box-sizing: border-box;">
                <input type="file" name="travelBusinessFileOne" style="display: none" id="travelBusinessFileOne"
                       autocomplete="off"
                       class="layui-input">
                <button class="layui-btn layui-btn-normal" type="button" id="btnone">上传文件
                </button>
                <a id="tsone" target="_blank" style="text-decoration:none"></a>
            </div>
        </div>
        <!-- 提交-->
        <div class="layui-form-item" id="sub" style="margin: 30px 0;">
            <div class="layui-input-block" id="flows">
                <button type="submit" class="layui-btn site-demo-active" lay-submit="" lay-filter="demo1">立即提交
                </button>
                <input type="button" class="layui-btn layui-btn-warm" style="display: none" id="deleteById"
                       value="取消申请"/>
            </div>
        </div>
    </form>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>流程日志</legend>
    </fieldset>
    <ul class="layui-timeline" id="schedule">

    </ul>
</div>
<script>
    let res;
    let pkTravelBusinessId = getQueryString("pkTravelBusinessId");
    layui.use(['form', 'laydate', 'table'], function () {
        var table = layui.table;
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate;
        laydate.render({
            elem: '#travelBusinessTime' //指定元素
        });
        laydate.render({
            elem: '#travelBusinessStartTime' //指定元素
        });
        laydate.render({
            elem: '#travelBusinessEndTime' //指定元素
        });
        loadBussperson();
        let personnelId;
        if (pkTravelBusinessId) {
            res = getAjaxById(getRootPath() + "OaTravelBusinessFlowAction/findOaTravelBusinessFlowIdById/" + pkTravelBusinessId);
            //申请人
            $("#applyPersonnelName").val(res.data.personnelName);
            //流程id
            $("#pkTravelBusinessId").val(res.data.pkTravelBusinessId);
            // 员工名称
            $("#travelBusinessVehicles").val(res.data.travelBusinessVehicles);
            //申请人
            $("#applyPersonnelId").val(res.data.applyPersonnelId);
            // 出差原因
            $("#travelBusinessReason").val(res.data.travelBusinessReason);
            personnelId = res.data.personnelId;
            //备注
            $("#remark").val(res.data.remark);
            $("#travelBusinessPurpose").val(res.data.travelBusinessPurpose);
            $("#travelBusinessDepart").val(res.data.travelBusinessDepart);
            $("#isRevision").val(res.data.isRevision);
            //开始日期
            var date = dateFormat("yyyy-MM-dd", new Date(res.data.travelBusinessEndTime));
            $("#travelBusinessEndTime").val(date);
            // 结束日期
            let dateEnd = dateFormat("yyyy-MM-dd", new Date(res.data.travelBusinessStartTime));
            $("#travelBusinessStartTime").val(dateEnd);
            // 申请日期
            let travelBusinessTime = dateFormat("yyyy-MM-dd", new Date(res.data.travelBusinessTime));
            $("#travelBusinessTime").val(travelBusinessTime);

            $("#nSmallfileone").val(res.data.travelBusinessFile);
            var str = $("#nSmallfileone").val();
            if (str.length > 1) {
                $("#tsone").html(str.substring(0, 13) + "附件" + str.match(/\.([^\.]+)$/)[1]);
                $("#tsone").prop("href", str);
            }

            $("#personnelId").val(personnelId);
        } else {
            res = getAjaxById(getRootPath() + "OaPersonnelAction/getUser");
            console.log(res.pkPersonnelId)
            // 员工名称
            $("#applyPersonnelId").val(res.pkPersonnelId);
            $("#applyPersonnelName").val(res.personnelName);
            personnelId = res.pkPersonnelId;


            $("#personnelId").val(personnelId);

        }

        $("#bodys").show();
        loadBusinessType();

        form.render();
        //监听起草提交
        form.on('submit(demo1)', function (data) {
            console.info(data.field);
            var StartTime = $("#travelBusinessStartTime").val();
            var EndTime = $("#travelBusinessEndTime").val();
            if (EndTime < StartTime) {
                layer.msg("结束时间不能小于开始时间");
                return false;
            }
            /*data={
                affirmTime:$("#affirmTime").val(),
                personnelId:$("#personnelId").val()
            };*/
            // 单击之后提交按钮不可选,防止重复提交
            var DISABLED = 'layui-btn-disabled';
            // 增加样式
            $('.site-demo-active').addClass(DISABLED);
            // 增加属性
            $('.site-demo-active').attr('disabled', 'disabled');
            var url = getRootPath() + "OaTravelBusinessFlowAction/apply";
            var formData = new FormData(document.getElementById("formDId"));
            var data = postAjaxFile(url, formData);
            if (data.code === 1) {
                layer.msg('新增成功3秒后关闭当前窗口', {icon: 1});
                setTimeout(function () {
                    formClose();
                }, 3000);
                setTimeout(function () {
                    parent.layui.table.reload('test');//刷新父页面
                    //window.parent.location.reload();//刷新父页面
                    const index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                }, 3000);
                //window.location.reload();//刷新页面
            } else if (res.code === 500) {
                error('500');
            } else {
                layer.msg("新增失败");
            }
            return false;
        });
        if (pkTravelBusinessId) {
            const ress = getAjaxById(getRootPath() + "OaFlowAction/selectFlowSchedule/" + pkTravelBusinessId);
            $("#schedule").html("");
            $.each(ress, function (index, item) {
                if (item.createdBy) {
                    $("#schedule").append('<li class="layui-timeline-item">\n' +
                        '        <i class="layui-icon layui-timeline-axis"></i>\n' +
                        '        <div class="layui-timeline-content layui-text">\n' +
                        '            <h3 class="layui-timeline-title">' + dateFormat('yyyy-MM-dd hh:mm:ss', new Date(item.createdTime)) + '&nbsp;&nbsp;&nbsp;' + item.flowName + '</h3>\n' +
                        '            <p>' + item.formReason + '</p>\n' +
                        '            <p>操作人：' + item.createdBy + '</p>\n' +
                        '        </div>\n' +
                        '    </li>')

                } else {
                    $("#schedule").append('<li class="layui-timeline-item">\n' +
                        '        <i class="layui-icon layui-timeline-axis"></ i>\n' +
                        '        <div class="layui-timeline-content layui-text">\n' +
                        '            <h3 class="layui-timeline-title">' + dateFormat('yyyy-MM-dd hh:mm:ss', new Date(item.createdTime)) + '&nbsp;&nbsp;&nbsp;' + item.flowName + '</h3>\n' +
                        '            <p>' + item.formReason + '</p>\n' +
                        '        </div>\n' +
                        '    </li>')
                }
            });
        }
    });

    /*出差类型*/
    function loadBusinessType() {
        const nation = getAjaxById(getRootPath() + "OaDataDictionaryAction/findKeyword/BUSINESSWAY");
        $.each(nation, function (index, item) {
            $("#travelBusinessType").append("<option value='" + item.pkDataDictionaryId + "'>" + item.dataDictionaryName + "</option>");
        });
    }

    /*申请人*/
    function loadBussperson() {
        const nation = getAjaxById(getRootPath() + "OaPersonnelAction/personnelFindByAll");
        $.each(nation.data, function (index, item) {
            $("#personnelId").append("<option value='" + item.pkPersonnelId + "'>" + item.personnelName + "</option>");
        });

    }

    <!-- 图片处理-->
    $.ajaxSetup({
        async: false
    });
    $(function () {
        $(".layui-bg-red").click(function () {
            $("#tsone").html("");
        });
        //图片1
        $("#btnone").click(function () {
            $("#travelBusinessFileOne").click();
            $("#travelBusinessFileOne").change(function (obj) {
                var fileInput = $('#travelBusinessFileOne').get(0).files[0];//获取input控件的file
                if (fileInput) {
                    var str = fileInput.name;
                    //取后缀名
                    $("#tsone").html(str.substring(0, 4) + "..." + str.match(/\.([^\.]+)$/)[1]);
                }
            });
        });
    })
</script>
</body>
</html>